import React, { FC, useContext, useState } from 'react';
import { Form, Input, InputNumber, Select, Button } from 'antd';
import { DesignRedux } from '../../DesignRedux';
import CheckImgModal from '../../CheckImgModal';
import { loopTreeNode } from '../../utils';
import styles from './index.less';

import {
  AlignCenterOutlined,
  AlignLeftOutlined,
  AlignRightOutlined,
  BoldOutlined,
  ItalicOutlined,
  UnderlineOutlined,
  ArrowLeftOutlined,
  ArrowDownOutlined,
  ArrowRightOutlined,
  ArrowUpOutlined,
} from '@ant-design/icons';

const { Option } = Select;

const AttributeFC = () => {
  const [form] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 在使用useContext解构出color中想要传递的值，就是最终返回给我们的值
  const { globalState, dispatch } = useContext(DesignRedux);
  const { rightNode, schema } = globalState; // 右侧元素属性

  const onClickExec = () => {
    // document.execCommand('underline');
    // document.execCommand('italic');
    document.execCommand('ForeColor', false, '#BBDDCC');
  };

  function onChange(value) {
    console.log('changed', value);
  }
  const onClickShowImgModal = () => {
    setIsModalVisible(true);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const onChangeImg = (param) => {
    // 关闭躺框
    handleCancel();
    let newSchema = [...schema];
    loopTreeNode(newSchema, rightNode.key, (item) => {
      item.comProperty.imgUrl = param.img; // 更改图片
    });
    dispatch({
      schema: newSchema,
    });
  };

  form.setFieldsValue({
    ...rightNode,
  });

  const { imgUrl } = rightNode.comProperty;

  const selectBefore = (
    <Select defaultValue="http://" className="select-before">
      <Option value="http://">http://</Option>
      <Option value="https://">https://</Option>
    </Select>
  );
  const selectAfter = (
    <Select defaultValue=".com" className="select-after">
      <Option value=".com">px</Option>
      <Option value=".jp">%</Option>
    </Select>
  );

  // TODO 动态修改各种属性
  return (
    <Form
      form={form}
      layout="vertical"
      onFieldsChange={(_, allFields) => {
        console.log('====', _);
      }}
    >
      <Form.Item label="ID" name="id" tooltip="组件唯一 id">
        <Input placeholder="组件 id" />
      </Form.Item>
      <Form.Item label="标题" name="title" tooltip="组件名称">
        <Input placeholder="组件名称" />
      </Form.Item>

      <Form.Item label="背景图" name="bg" tooltip="背景图">
        <img
          src={imgUrl}
          style={{
            height: 40,
            borderRadius: 3,
            width: '100%',
            cursor: 'pointer',
          }}
          onClick={onClickShowImgModal}
        />
      </Form.Item>

      <Form.Item label="对齐方式" name="requiredMarkValue">
        <div className={styles.textCommend} onClick={onClickExec}>
          <BoldOutlined />
          <ItalicOutlined />
          <UnderlineOutlined />
          <AlignLeftOutlined />
          <AlignCenterOutlined />
          <AlignRightOutlined />
        </div>
      </Form.Item>

      <Form.Item label="字体" name="requiredMarkValue">
        <Select size={'small'}>
          <Option value="male">Arial</Option>
          <Option value="female">Arial Black</Option>
          <Option value="other">微软雅黑</Option>
        </Select>
      </Form.Item>

      <Form.Item label="单位" name="requiredMarkValue">
        <Select size={'small'}>
          <Option value="male">%</Option>
          <Option value="female">px</Option>
        </Select>
      </Form.Item>

      <div style={{ textAlign: 'center' }}>
        <Input size={'small'} prefix={<ArrowUpOutlined />} suffix="PX" />
      </div>

      <div style={{ textAlign: 'center' }}>
        <Input size={'small'} prefix={<ArrowDownOutlined />} suffix="PX" />
      </div>
      <div style={{ textAlign: 'center' }}>
        <Input size={'small'} prefix={<ArrowLeftOutlined />} suffix="PX" />
      </div>
      <div style={{ textAlign: 'center' }}>
        <Input size={'small'} prefix={<ArrowRightOutlined />} suffix="PX" />
      </div>

      <Form.Item label="左" name="111">
        <InputNumber
          defaultValue={100}
          min={0}
          max={100}
          formatter={(value) => `${value}%`}
          parser={(value) => value.replace('%', '')}
          onChange={onChange}
        />
      </Form.Item>
      <Form.Item label="左" name="111">
        <InputNumber
          defaultValue={100}
          min={0}
          max={100}
          formatter={(value) => `${value}%`}
          parser={(value) => value.replace('%', '')}
          onChange={onChange}
        />
      </Form.Item>
      <Form.Item label="左" name="111">
        <InputNumber
          defaultValue={100}
          min={0}
          max={100}
          formatter={(value) => `${value}%`}
          parser={(value) => value.replace('%', '')}
          onChange={onChange}
        />
      </Form.Item>
      <Form.Item label="左" name="111">
        <InputNumber
          defaultValue={100}
          min={0}
          max={100}
          formatter={(value) => `${value}%`}
          parser={(value) => value.replace('%', '')}
          onChange={onChange}
        />
      </Form.Item>

      <CheckImgModal
        visible={isModalVisible}
        onChange={onChangeImg}
        onClose={handleCancel}
      />
    </Form>
  );
};

export default AttributeFC;
